<!-- Login.vue -->
<template>
  <div class="position">
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="用户登录" name="user">
            <user-login
              @forgotPassword="forgotPassword"
              @login-success="handleLoginSuccess"
              :userrole="userrole"
            />
          </el-tab-pane>
          <el-tab-pane label="咨询师登录" name="counselor">
            <user-login
              @forgotPassword="forgotPassword"
              @login-success="handleLoginSuccess"
              :userrole="userrole"
            />
          </el-tab-pane>
          <el-tab-pane label="管理员登录" name="admin">
            <user-login
              @forgotPassword="forgotPassword"
              @login-success="handleLoginSuccess"
              :userrole="userrole"
            />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import UserLogin from "@/components/login/UserLogin.vue";

export default {
  data() {
    return {
      activeTab: "user", // 默认显示用户登录
    };
  },
  computed: {
    userrole() {
      if (this.activeTab == "user") {
        return 1;
      } else if (this.activeTab == "counselor") {
        return 2;
      } else {
        return 3;
      }
    },
  },
  methods: {
    handleTabClick(tab) {
      console.log(tab);
    },
    handleLoginSuccess() {
      // 处理登录成功逻辑
      console.log("登录成功");
    },
    forgotPassword() {
      this.$emit("forgotPassword");
    },
  },
  components: {
    UserLogin,
  },
};
</script>

<style scoped>
/* 样式可以根据需要自行修改 */
.position {
  padding-top: 10px;
}
</style>
